<template>
  <div>
    <input v-model="likes" type="checkbox" value="苹果"> 苹果
    <input v-model="likes" type="checkbox" value="葡萄"> 葡萄
    <input v-model="likes" type="checkbox" value="香蕉"> 香蕉
    {{ likes }}
    <hr>
    <h1 :title="author">红楼梦</h1>
    <button @click="author='曹公'">修改作者</button>
    <hr>
    今天吃什么？
    <p v-if="eatMantou">馒头</p>
    <p v-else>水饺</p>
    <button @click="eatMantou=!eatMantou">切换食物</button>
    <hr>
    <h1 v-show="showBook">水浒传</h1>
    <button @click="showBook=!showBook">显示隐藏</button>
    {{ showBook }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const likes = ref(["葡萄"]);
const author = ref("曹雪芹");

const eatMantou = ref(true);
const showBook = ref(false);


</script>

<style lang="scss" scoped>

</style>